<template>
    <div class='exchange-info'>
        <public-head>
            <span>修改信息</span>
        </public-head>
        <div class="main">
            <ul>
                <li>
                    <label>手机</label>
                    <input type="tel" placeholder="请输入您的手机号" maxlength="11" v-model="phone">
                </li>
                <li>
                    <label>公司</label>
                    <input type="text" placeholder="请输入公司名称" v-model="company">
                </li>
            </ul>
            <button type="button" class="submit" @click="submit">提交</button>
        </div>
        <!--错误提示-->
        <toast v-if="toast">
            <p slot="text">{{toastText}}</p>
        </toast>
        <loading v-if="is_loading"></loading>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            phone: '', // 修改电话号码
            company: '' // 修改公司名称
        }
    },
    methods: {
        submit() {
            let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
            if (!this.phone || !reg.test(this.phone)) {
                this.Toast('请填写正确的手机号码')
                return
            }
            if (!this.company) {
                this.Toast('请输入公司名称')
                return
            }
            // 提交信息
        },
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['toast', 'toastText','is_loading'])
    }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.exchange-info {
    .init;
    ul {
        margin-top: 0.2rem;
        li {
            display: -webkit-flex;
            align-items: center;
            height: 1rem;
            background: #fff;
            padding: 0 0.3rem;
            .bor1px;
            label {
                width: 1.33rem;
                .ft(0.28rem);
                color: #222;
            }
            input {
                width: 3rem;
                line-height: 0.4rem;
            }
        }
    }
    .submit {
        display: block;
        .wh(6.9rem,
        0.8rem);
        line-height: 0.8rem;
        .ft(0.32rem);
        .tc;
        color: #fff;
        background: #5b91fe;
        box-shadow: 0 3px 5px 0 rgba(91, 144, 254, 0.50);
        border-radius: 2px;
        margin: 0.8rem auto 0;
    }
}
</style>